<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="mytable" width="500px" border="1">
			<tbody>
				
			</tbody>
		</table>
		
		<script type="text/javascript">
			console.log(table);//undefined：表示没有被赋值
			//引用  =   对象
			var table = document.getElementById("mytable"); //表示已经获取了id为mytable的标签
			console.log(table);//table对象
			//2.加上表头，使用document创建元素
			let caption = document.createElement("caption");
			caption.innerText = "Table 1: Current Inventory";
			table.appendChild(caption);
			
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			
			let thead = document.createElement("thead");
			//将head标签的引用thead，附加到table中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let th = document.createElement("th");
			th.innerText = "Product";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "Price";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "Rating";
			tr.appendChild(th);
	
			let arrProduct = ["Vitae Quam Lorem","In Tempus","Lorem Ipsum Dolor Sat","Quis Felis Fringilla","Nunc Sem Pharetra","Vel Fauvibus Vitae","Non Adipiscing Vitae","Aenean Orci Ante","Venenatis Non Adipiscing"];
			let arrPrice = ["$19.95","$14.55","Priceless","$29.95","$75.99","$82.00","$1.95","$17.95","$44.00"];
			let arrRating = ["*****","***","*****","**","***","*","****","****","*****"];
			let len = arrProduct.length;
			for(let i = 0; i < len; i++){
				
				tr = document.createElement("tr");
				tbody.appendChild(tr);
				let td = document.createElement("td");
				td.innerText = arrProduct[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrPrice[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrRating[i];
				tr.appendChild(td);
			}
			
			//写在函数中，然后通过HTML标签的事件来触发
		</script>
	</body>
</html>
